<template>
  <div>
    <el-button type="primary" @click="willAdd">添加</el-button>

    <v-form ref="form" :list="list" :info="info" @init="init"></v-form>

    <v-list :list="list" @edit="willEdit" @init="init"></v-list>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="count"
      :page-size="size"
      @current-change="changePage"
    ></el-pagination>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import vForm from "./components/form.vue";
import vList from "./components/list.vue";
import toggle from "../../mixins/toggle.js"
import { requsercount, requserlist } from "../../request/api";
export default {
  mixins:[toggle],
  components: {
    vForm,
    vList,
  },
  computed: {
    ...mapGetters({}),
  },
  mounted() {
    // 获取列表
    this.init();
  },
  props: [],
  data() {
    return {
    
      //列表的初始值
      list: [],
      count: 0, //管理员总数
      size: 2, //一页的数量
      page: 1, //当前的页码
    };
  },
  methods: {
    ...mapActions({}),
   
    init() {
      //2.请列表
      this.getList();
      //2.请总数
      requsercount().then((res) => {
        if (res.data.code == 200) {
          this.count = res.data.list[0].total;
        }
      });
    },
    getList() {
      //1.进来就请求数据
      requserlist({
        page: this.page,
        size: this.size,
      }).then((res) => {
        if (res.data.code == 200) {
          // 取回来的数据是个空数组，而且不是当前页不是第一页,取上一页的数据
          let list = res.data.list ? res.data.list : [];
          if (list.length == 0 && this.page != 1) {
            this.page--;
            this.getList();
            return;
          }

          this.list = res.data.list ? res.data.list : [];
        }
      });
    },
    //修改了页码
    changePage(page) {
      this.page = page;
      this.getList();
    },
  },
  
};
</script>
<style lang="less" scoped>
</style>